<template>
  <div>
    <el-dialog
      :title="updataId ? '修改学科' : '新增学科'"
      :visible="subjectVisible"
      width="400px"
      @close="closed"
      class="subjects-add"
    >
      <el-form
        :rules="rules"
        label-width="80px"
        :model="updataList"
        ref="clearRormRef"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            placeholder="请输入学科名称"
            v-model.trim="updataList.subjectName"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isFrontDisplay">
          <el-switch
            v-model="updataList.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch
        ></el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closed">取 消</el-button>
        <el-button type="primary" @click="subjectClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addSubject, getSubjectById, updateSubject } from '@/api/hmmm/subjects'

export default {
  name: '',
  components: {},
  props: {
    subjectVisible: {
      type: Boolean,
      required: true
    },
    updataId: {
      type: Number || String
    }
  },
  data() {
    return {
      title: '',
      updataList: {
        subjectName: '',
        isFrontDisplay: 1
      },
      rules: {
        subjectName: [
          { required: true, message: '学科名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    closed() {
      this.$emit('update:subjectVisible', false)
      setTimeout(() => {
        this.$emit('update:updataId', 0)
      }, 500)
      this.updataList = { subjectName: '', isFrontDisplay: 1 }
    },

    async updateSubs(id) {
      const res = await getSubjectById(id)
      // console.log(res)
      this.updataList = res.data
    },

    async subjectClick() {
      try {
        await this.$refs.clearRormRef.validate()

        const update = {
          id: this.updataId,
          subjectName: this.updataList.subjectName,
          isFrontDisplay: this.updataList.isFrontDisplay
        }
        if (this.updataId) {
          await updateSubject(update)
        } else {
          await addSubject(this.updataList)
        }

        this.$refs.clearRormRef.resetFields()
        this.$emit('update:subjectVisible', false)
        this.$emit('subjectsAdd')
      } catch (error) {
        this.$message.error('添加数据失败')
      }
    }
  },
  created() {},
  mounted() {}
}
</script>
<style scoped lang="scss">
.el-form {
  width: 400px;
  .el-input el-input--medium,
  .el-input__inner,
  .el-input {
    width: 280px;
  }
}
</style>
